<template>
  <div class="data-v-cus-bar6" :style="hostStyle">
    <div v-for="(s, i) in series" :key="i" class="bar">
      <!-- <div class="bar-name">{{ s.name | upper }}</div>
      <div class="bar-item">
        <div
          class="bar-stick"
          v-for="i in stickNums"
          :key="i"
          :style="getStickSty(i, s.value)"
        ></div>
      </div>
      <div class="bar-value">{{ s.value }}</div> -->
      <div
        class="bar-stick"
        v-for="i in stickNums"
        :key="i"
        :style="getStickSty(i, s.value)"
      ></div>
      <div class="label" :title="s.name">{{ s.name }}</div>
      <div class="bar-inner" :style="barStyle(s.value)">
        <div class="bar-value">{{s.value}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Color from "color-js";
// import { modifyOpacity } from "../color";
export default {
  name: "cus-bar6",
  props: ["series", "maxValue", "color"],
  data() {
    return {
      stickNums: 50,
      stickColor: Color(this.color)
        .darkenByAmount(0.2)
        .setAlpha(0.3)
    };
  },
  computed: {
    hostStyle() {
      return {
        "--color-bottom": Color(this.color).shiftHue(20).darkenByAmount(0.1)
      };
    }
  },
  filters: {
    upper(v) {
      return String(v).toUpperCase();
    }
  },
  methods: {
    getPercentage(value) {
      return value / this.maxValue;
    },
    sty(s) {
      return {
        width: this.getPercentage(s.value) * 100 + "%"
      };
    },
    getStickSty(index, value) {
      let cur = index / this.stickNums;
      let percentage = this.getPercentage(value);
      let normalColor = Color(this.color).setAlpha(0.45);
      return {
        backgroundColor: cur < percentage ? normalColor : this.stickColor
      };
    },
    barStyle(value) {
      let percentage = this.getPercentage(value);
      return {
        top: 100 - percentage * 100 + 10 + "%"
      };
    }
  }
};
</script>

<style lang="less">
.data-v-cus-bar6 {
  height: 240px;
  display: inline-flex !important;
  .bar {
    display: flex;
    position: relative;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column-reverse;
    width: 20px;
    height: 100%;
    position: relative;
    // background: #ccc;
    margin: 5px 20px;
    .label {
      width: 60px;
      position: absolute;
      bottom: -20px;
      left: -20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .bar-percentage {
      padding: 0 5px;
    }
    .bar-name {
      width: 100px;
      padding: 0 5px;
      color: rgba(255, 255, 255, 0.8);
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
    }
    .bar-item {
      height: 12px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // background: #26282b;
      position: relative;
      margin-left: 5px;
      color: rgba(255, 255, 255, 0.8);

      // border-bottom: 1px solid var(--color);
      // border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .bar-value {
      position: absolute;
      left: -38px;
      top: -20px;
      width: 80px;
      // color: var(--color);
      color: '#fff';
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font-weight: bold;
      font-size: 12px;
    }
    .bar-inner {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      // height: 60px;
      border-radius: 5px;
      background: linear-gradient(to top, var(--color-bottom), var(--color));
      transition: 0.25s;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }
    .bar-stick {
      height: 2px;
      width: 100%;
      // background: #0E1A1C;
      // background: #3d8491;
    }
  }
}
</style>
